<template>
  <view class="page ui-form-basic">
    <fui-form ref="formRef" :model="form" class="form-wrapper" error-position="2" error-align="right" top="0" labelWidth="200" labelSize="28" labelWeight="bold" :show="false">
      <fui-section title="单独校验示例" marginTop="48" marginBottom="24" :isLine="true" size="28"></fui-section>
      <fui-form-item label="产品名称" prop="name" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input v-model="form.name" placeholder="请输入产品名称" :borderBottom="false" :padding="[0]" size="28"></fui-input>
      </fui-form-item>
      <fui-form-item label="产品单价" prop="price" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input v-model="form.price" placeholder="请输入产品单价" type="number" :borderBottom="false" :padding="[0]" size="28"></fui-input>
      </fui-form-item>

      <fui-section title="组合校验示例1" marginTop="48" marginBottom="24" :isLine="true" size="28"></fui-section>
      <fui-form-item label="库存数量" prop="inventory" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input v-model="form.inventory" placeholder="请输入库存数量" type="number" :borderBottom="false" :padding="[0]" size="28"></fui-input>
      </fui-form-item>
      <fui-form-item label="购买数量" prop="num" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input v-model="form.num" placeholder="请输入库存数量" type="number" :borderBottom="false" :padding="[0]" size="28"></fui-input>
      </fui-form-item>

      <fui-section title="组合校验示例2" marginTop="48" marginBottom="24" :isLine="true" size="28"></fui-section>
      <view class="form-block-wrapper">
        <view class="form-block-item">
          <fui-text text="满" size="24"></fui-text>
          <fui-form-item label="" prop="startNum" left="0" :bottomBorder="false" marginTop="14" :padding="['16rpx', 0]">
            <fui-input v-model="form.startNum" placeholder="请输入金额" type="number" :borderBottom="false" backgroundColor="transparent" :padding="[0]" size="28"></fui-input>
          </fui-form-item>
          <fui-text text="减" size="24"></fui-text>
          <fui-form-item label="" prop="discountNum" left="0" :bottomBorder="false" marginTop="14" :padding="['16rpx', 0]">
            <fui-input v-model="form.discountNum" placeholder="请输入金额" type="number" :borderBottom="false" backgroundColor="transparent" :padding="[0]" size="28"></fui-input>
          </fui-form-item>
        </view>
        <fui-text class="form-item-error" :text="getFieldErrorMsg('startNum') || getFieldErrorMsg('discountNum')" size="24" color="#ff2b2b"></fui-text>
      </view>
    </fui-form>

    <view class="btn-wrapper">
      <fui-button text="提交" height="78rpx" radius="8rpx" :margin="['0']" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { useStore } from 'vuex'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const formRef = ref(null)
const form = ref({})
const rules = [
  {
    name: 'name',
    rule: ['required'],
    msg: ['请输入产品名称']
  },
  {
    name: 'price',
    rule: ['required', 'isAmount'],
    msg: ['请输入产品单价', '金额请输入正确的格式，支持2位小数']
  },
  {
    name: 'inventory',
    rule: ['required', 'isGreater:0', 'isNumber'],
    msg: ['请输入库存数量', '库存数量必须大于0', '库存数量必须为整数'],
    validator: [
      {
        msg: '库存数量不得小于购买数量',
        method: (value) => {
          return !form.value.num || value >= form.value.num
        }
      }
    ]
  },
  {
    name: 'num',
    rule: ['required', 'isGreater:0', 'isNumber'],
    msg: ['请输入购买数量', '购买数量必须大于0', '购买数量必须为整数'],
    validator: [
      {
        msg: '购买数量不得大于库存数量',
        method: (value) => {
          return !form.value.inventory || value <= form.value.inventory
        }
      }
    ],
  },
  {
    name: 'startNum',
    rule: ['required', 'isGreater:0', 'isNumber'],
    msg: ['请输入满减门槛', '满减门槛必须大于0', '满减门槛必须为整数'],
    validator: [
      {
        msg: '满减门槛不得小于等于减免金额',
        method: (value) => {
          return !form.value.discountNum || value > form.value.discountNum
        }
      }
    ],
  },
  {
    name: 'discountNum',
    rule: ['required', 'isGreater:0', 'isNumber'],
    msg: ['请输入减免金额', '减免金额必须大于0', '减免金额必须为整数'],
    validator: [
      {
        msg: '减免金额必须小于满减门槛',
        method: (value) => {
          return !form.value.startNum || value < form.value.startNum
        }
      }
    ],
  }
]

const getFieldErrorMsg = (field) => {
  return formRef.value && formRef.value.getFieldErrorMsg(field)
}

const handleSubmit = async () => {
  try {
    const validRes = await formRef.value.validator(form.value, rules, true)
    if (!validRes.isPassed) return
  } catch (err) {
    console.log(err)
  }
}

onReady(() => {
  formRef.value && formRef.value.switchRealTimeValidator(true, rules)
})
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";

.form-block-wrapper {
  .form-block-item {
    display: flex;
    align-items: center;
    margin-top: 32rpx;
    padding: 10rpx;
    ::v-deep .fui-text__wrap {
      .fui-text__content {
        white-space: nowrap;
      }
    }
    ::v-deep .fui-form__item-wrap {
      position: unset;
      .fui-form__item-outer {
        width: auto;
        border-radius: 8rpx !important;
        background-color: #f7f7f7 !important;
        margin: 0 10rpx;
        padding: 0 16rpx;
      }
    }
    ::v-deep .fui-form__item-error {
      display: none;
    }
  }
  .form-item-error {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 36rpx !important;
  }
}
</style>